﻿@model EventSys.BussinesEntities.Evento

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts{

    <script type="text/javascript">
        var row = 0;
        $(function () {
            //var row = 0;
            //evento para agregar una nueva fila
            $(document).on('click', '.clsAgregarFila', function () {
                //$("#add").click(function (e) {   // probando con el boton "id="add""  igual funciona
                //    e.preventDefault();

                var strNueva_Fila = '<tr id="' + row + '">' +
                    //'<td><input name="Inversions[' + row + '].TipoAsistente" type="text" value='+listBox+' /></td>\n' +
                    '<td> <select name="Inversions[' + row + '].TipoAsistente" id="tipoParticipante">' +
                        '<option value=[----------------]>[----------------]</option>' +
                        '<option value=Egresado>Egresado</option>' +
                        '<option value=Estudiante>Estudiante</option>' +
                        '<option value=Otros>Otros</option>' +
                        '</select> </td>\n' +
                    '<td ><input type="text" name="Inversions[' + row + '].Monto" value="" id="monto" /></td>\n' +
                    '<td><input type="button" id="eliminar" name="eliminar" value="Eliminar" class= "clsEliminar" /></td>\n' +
                    '</tr>';

                var objTabla = $(this).parents().get(3);

                //agregamos la nueva fila a la tabla
                $(objTabla).find('#detalleInv > tbody').append(strNueva_Fila);
                //si el cuerpo la tabla esta oculto (al agregar una nueva fila) lo mostramos
                if (!$(objTabla).find('tbody').is(':visible')) {
                    //le hacemos clic al titulo de la tabla, para mostrar el contenido
                    $(objTabla).find('caption').click();
                }
                row++;
                //alert(row);
                if (row == 3) {
                    //alert($(objTabla).find('#detalleInv > tbody').columnCount());
                    //agregarf.setActive(false);
                    $('.clsAgregarFila').hide();
                }
            });

            /* Eliminar Fila de Inversion   */
            $(document).on('click', ".clsEliminar", function (e) {
                e.preventDefault();

                var tr = $(this).parents("tr");

                $(tr).fadeOut("slow", function () {
                    $(tr).remove();

                    $("#detalleInv tbody tr").each(function (index, element) {
                        var fila = $(element);
                        //$(fila).find('input[name$="TipoAsistente"]').attr("name", 'Inversions[' + index + '].TipoAsistente');
                        //objeto        terminacion del name            nombre completo + el index
                        $(fila).find('select[name$="TipoAsistente"]').attr("name", 'Inversions[' + index + '].TipoAsistente');
                        $(fila).find('input[name$="Monto"]').attr("name", 'Inversions[' + index + '].Monto');
                    });
                });
                row--;
                if (row != 3) {
                    //alert('ud a agregado 3 filas');
                    //agregarf.setActive(false);
                    $('.clsAgregarFila').show();
                }
            });

            /* Validar Dropdown si eleccion se repite  'click', '.clsAgregarFila', function () */
            //var i = 0;
            $(document).on('change', '#tipoParticipante', function () {
                var valor = $(this).val();
                var filasTabla = document.getElementById("detalleInv").rows.length;
                var texto = $(this).find("option:selected").html();
                //var opcion = $('#tipoParticipante').find("option:selected");

                //alert(texto)

                if (texto != "[----------------]") {
                    $("#tipoParticipante option[value='" + texto + "']").each(function () {
                        $(this).hide();
                    });
                }

                if (texto == '[----------------]') {
                    $("#tipoParticipante option[value !='" + texto + "']").each(function () {
                        if (!$(this).is('option:selected')) {
                            $(this).show();
                        }
                    })
                }
                for (var i = 0; i <= filasTabla; i++) {
                    var sel = $("#" + i + " option:selected").val();
                    var valorAnt = sel;
                    if (sel != null) {
                        //alert(sel);
                        //alert(valor);
                    }


                }
            });


            /* FUNCION PARA AGREGAR EL AUSPICIADOR   */
            var f = 0;
            $(document).on('click', '.clsAgregarAusp', function () {

                var txt = $("#auspiciador").val();
                var id = "", nTxt = "";
                var c = 0;

                while (txt.substring(c, c + 1) != " ") {
                    id = txt.substr(0, c + 1);
                    nTxt = txt.substr(c + 4, (txt.length - (c + 4)));
                    c++;
                }

                var cadena = '<tr>' +
                '<td ><input type="text" name="DetAuspiciadors[' + f + '].idAuspiciador" value="' + id + '" id="idAusp" disabled /></td>\n' +
                '<td>' + nTxt + '</td>' +
                '<td> <input type="button" id="eliminar" name="eliminar" value="Eliminar" class= "clsDelete" /> </td>';

                var objTable = $(this).parents().get(3);

                $(objTable).find('#detAuspiciador> tbody').append(cadena);
                //si el cuerpo la tabla esta oculto (al agregar una nueva fila) lo mostramos
                if (!$(objTable).find('tbody').is(':visible')) {
                    //le hacemos clic al titulo de la tabla, para mostrar el contenido
                    $(objTable).find('caption').click();
                }
                $("#auspiciador").val("");

                f++;
                //alert(nTxt);
            });

            /* Eliminar Fila de Auspiciador   */
            $(document).on('click', ".clsDelete", function (e) {
                e.preventDefault();

                var tr = $(this).parents("tr");

                $(tr).fadeOut("slow", function () {
                    $(tr).remove();

                    $("#detAuspiciador tbody tr").each(function (index, element) {
                        var fila = $(element);
                        $(fila).find('select[name$="idAuspiciador"]').attr("name", 'DetAuspiciadors[' + index + '].idAuspiciador');
                        $(fila).find('input[name$="idAuspiciador"]').attr("name", 'DetAuspiciadors[' + index + '].idAuspiciador');
                    });
                });
            });

            /* /////////   */
            $(document).on('change', "#inLibre", function (e) {
                var checked = $(this).is(":checked");
                //alert(checked)
                if (checked) {
                    $(Object).find("#secInversion").prop('disabled', true);
                }
                else {
                    $(Object).find("#secInversion").prop('disabled', false);
                }
            });
        });



    </script>
}

<h2>Create</h2>

@using (Html.BeginForm("Create", "Evento", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
@*@Html.AntiForgeryToken()*@

    <fieldset>
        <legend>Evento</legend>

        <table style="float: left">
            <tr>
                <td>
                    @Html.Label("Evento Simple:")
                </td>
                <td>
                    @Html.CheckBox("EventoSimple", true)
                </td>

                <td></td>

                <td>Fecha Inicio:</td>
                <td>
                    @(Html.Kendo().DatePicker().Name("FechaIni").Value(DateTime.Today).HtmlAttributes(new { style = "width:110px" }))
                </td>
            </tr>

            <tr>
                <td>Nombre: </td>
                <td>
                    @Html.TextBoxFor(model => model.NomEvento, new { style = "width: 200px;" })
                    @Html.ValidationMessageFor(model => model.NomEvento)
                </td>

                <td></td>

                <td>Fecha Final:  </td>
                <td>
                    @(Html.Kendo().DatePicker().Name("FechaFin").Value("FechaFin").HtmlAttributes(new { style = "width:110px" }))
                </td>
            </tr>
            <tr>
                <td>Tipo Evento: </td>
                <td>
                    @Html.DropDownList("idTipoEvento")
                    @Html.ValidationMessageFor(model => model.idTipoEvento)
                </td>

                <td></td>

                <td>Carrera: </td>
                <td>
                    @Html.TextBoxFor(model => model.Carrera, new { style = "width: 180px;" })
                    @Html.ValidationMessageFor(model => model.Carrera)
                </td>
            </tr>

            <tr>
                <td>Organizador:</td>
                <td>
                    @Html.TextBoxFor(model => model.Organizador, new { style = "width: 200px;" })
                    @Html.ValidationMessageFor(model => model.Organizador)
                </td>

                <td></td>

                <td>Sede:</td>
                <td>
                    <div class="editor-field">
                        @Html.DropDownList("Sede", new MultiSelectList(new[] { "UPN-CAJAMARCA", "UPN-LIMA", "UPN-TRUJILLO" }))
                        @Html.ValidationMessageFor(model => model.Sede)
                    </div>
                </td>
            </tr>

            <tr>
                <td>Informes:</td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Informes, new { style = "width: 200px;" })
                        @Html.ValidationMessageFor(model => model.Informes)
                    </div>
                </td>

                <td></td>
                <td>
                    @Html.Label("Ingreso Libre:")
                </td>
                <td>
                    @Html.CheckBox("IngresoLibre", true, new { id = "inLibre" })
                </td>
            </tr>

            <tr>

                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Estado)
                    </div>
                </td>
                <td>
                    <div class="editor-field">
                        @Html.DropDownList("idEstado")
                        @Html.ValidationMessageFor(model => model.idEstado)
                    </div>
                </td>
            </tr>

        </table>

        <fieldset style="border: 2px groove #ccc; background: #e8eac9; width: 50px; float: right">
            <legend>
                <h2>LOGO</h2>
            </legend>

            <input type="file" name="image" id="image" value="Cargar" style="font-size: 11px;" />

        </fieldset>

        <div style="float: left">
            
            <!--  SECCION DE AUSPICIADORES   -->
            <fieldset style="border: 2px groove #ccc; background: #e8eac9; width: 270px; float: right">
                <legend>Auspiciadores:</legend>
                @*<form action="javascript:fnAgregar()" method="post" id="frmdetAusp">*@
                <p>
                    @(Html.Kendo().AutoComplete()
                        .Name("auspiciador")
                        .DataTextField("Marca")
                        .Placeholder("Seleccionar un Auspiciador...")
                        .MinLength(1)
                        .Filter("Contains")
                        .HtmlAttributes(new { style = "width:190px" })
                        .DataSource(source =>
                        {
                            source.Read(read => { read.Action("GetAuspiciador", "Auspiciador"); });
                        })
                    )
                    <input type="button" value="Añadir" class="clsAgregarAusp" id="agregarA">
                </p>
                @*<button type="button" id="add">Añadir</button>*@

                <div id="divContenedorTabla2">
                    <table id="detAuspiciador" border="1">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Auspiciador</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                @*</form>*@
            </fieldset>

            <!--  SECCION DE INVERSION   -->
            <fieldset style="border: 2px groove #ccc; background: #e8eac9; width: 270px; float: left" id="secInversion" disabled="disabled">
                <legend>Inversion</legend>
                @*<form action="javascript:fn_Agregar()" method="post" id="frmdetInv">*@
                <div id="divContenedorTabla">@*style="background-color: #0099CC; border: solid 1px red">*@
                    <p>
                        <input type="button" value="Agregar" class="clsAgregarFila" id="agregarf">
                    </p>
                    <table id="detalleInv" class="lista" border="1">
                        <thead>
                            <tr>
                                <th>Tipo de Asistente</th>
                                <th>Monto</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                @*</form>*@
            </fieldset>

        </div>



        <style>
            table /*#detalleInv*/ {
                background: #FDBB30;
                border-radius: 5px;
                border-spacing: 0px;
                border: solid 1px;
            }

                table /*#detalleInv*/ thead {
                    background: #232322;
                    font-weight: 700;
                    color: white;
                }

            #monto {
                width: 50px;
            }

            /*#detAuspiciadores {
                width: auto;
            }*/

            #idAusp {
                width: 30px;
                background: #FDBB30;
                text-align: center;
                font-weight: 500;
                border: none;
            }
        </style>

    </fieldset>
    
    <p>
        <input type="submit" value="Create" />
    </p>
    
}




<div>
    @Html.ActionLink("Back to List", "Index")
</div>

